<template>
  <div class="index-container df">
    <!-- 左边导航栏 -->
    <div class="index-container-left">
      <div class="left-header df aic">
        <div class="iconBox mr10">
          <i class="iconfont icon-dianpu"></i>
        </div>
        <h4 class="fff">外卖商家中心</h4>
      </div>
      <div class="left-nav">
        <el-menu
          :default-active="page"
          background-color="#666699"
          text-color="#fff"
          active-text-color="#ff9999"
          unique-opened
          router
          @select="selectmenu"
        >
          <div v-for="obj in treeList" :key="obj.index">
            <el-submenu v-if="obj.children" :index="obj.index">
              <template slot="title">
                <i :class="obj.i"></i>
                <span>{{ obj.text }}</span>
              </template>
              <el-menu-item
                v-for="child in obj.children"
                :key="child.index"
                :index="child.index"
                >{{ child.text }}</el-menu-item
              >
            </el-submenu>

            <el-menu-item v-else :index="obj.index">
              <i :class="obj.i"></i>
              <span slot="title">{{ obj.text }}</span>
            </el-menu-item>
          </div>
        </el-menu>
      </div>
    </div>
    <!-- 右边主体 -->
    <div class="index-container-right fff df fdc">
      <div class="right-header df jcsb">
        <div class="right-header-left df aic">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item
              v-for="item in selectlist"
              :key="item"
              class="fff"
              >{{ item }}</el-breadcrumb-item
            >
          </el-breadcrumb>
        </div>
        <div class="right-header-right df aic">
          <p>
            欢迎你,{{ uname }}
            <el-popconfirm title="点击退出登录,是否退出？" @confirm="exit">
              <i
                class="el-icon-s-tools"
                style="margin-left: 10px"
                slot="reference"
              ></i>
            </el-popconfirm>
          </p>
          <router-link to="/index/mine">
            <div class="headPic ml15">
              <img :src="img" />
            </div>
          </router-link>
        </div>
      </div>
      <div class="p20 flex">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import { getacc, token } from "@/apis/users";
import { bus } from "../utils/utils";
export default {
  data() {
    return {
      selectlist: [],
      treeList: [
        {
          index: "/index/main",
          text: "后台首页",
          i: "el-icon-s-home",
          bread: ["首页"],
        },
        {
          index: "/index/order",
          text: "订单管理",
          i: "el-icon-s-order",
          bread: ["订单管理"],
        },
        {
          index: "1",
          text: "商品管理",
          i: "el-icon-menu",
          children: [
            {
              index: "/index/itemlist",
              text: "商品列表",
              bread: ["商品管理", "商品列表"],
            },
            {
              index: "/index/itemadd",
              text: "商品添加",
              bread: ["商品管理", "商品添加"],
            },
            {
              index: "/index/itemtype",
              text: "商品分类",
              bread: ["商品管理", "商品分类"],
            },
          ],
        },
        {
          index: "/index/store",
          text: "店铺管理",
          i: "el-icon-s-shop",
          bread: ["店铺管理"],
        },
        {
          index: "2",
          text: "账号管理",
          i: "el-icon-s-custom",
          children: [
            {
              index: "/index/accountlist",
              text: "账号列表",
              bread: ["账号管理", "账号列表"],
            },
            {
              index: "/index/accountadd",
              text: "添加账号",
              bread: ["账号管理", "添加账号"],
            },
            {
              index: "/index/setpwd",
              text: "修改密码",
              bread: ["账号管理", "修改密码"],
            },
          ],
        },
        {
          index: "3",
          text: "销售统计",
          i: "el-icon-s-data",
          children: [
            {
              index: "/index/comtotal",
              text: "商品统计",
              bread: ["销售统计", "商品统计"],
            },
            {
              index: "/index/salestotal",
              text: "订单统计",
              bread: ["销售统计", "订单统计"],
            },
          ],
        },
      ],
      uname: "Anthony",
      page: "/index/main",
      uid: 0,
      img: "",
    };
  },
  created() {
    this.page = location.hash.replace("#", "");
    this.selectmenu(this.page);
    this.uname = localStorage.uname;
    if (localStorage.role == "normal") {
      this.treeList.splice(3);
    }
    token({ token: localStorage.token }).then((res) => {
      if (res.data.code == 0) {
        getacc({ id: localStorage.userID }).then((res) => {
          this.img = res.data.accountInfo.imgUrl;
        });
      } else {
        this.uname = "请登录!";
      }
    });

    //接收bus线程的传参
    bus.$on("header", (val) => {
      this.img = val;
    });
  },
  methods: {
    selectmenu(index) {
      console.log(index);
      let bread = [];
      for (const obj of this.treeList) {
        if (obj.children) {
          for (const child of obj.children) {
            if (child.index == index) {
              bread = child.bread;
            }
          }
        } else {
          if (obj.index == index) {
            bread = obj.bread;
          }
        }
      }
      this.selectlist = bread;
    },

    //退出登录
    exit() {
      localStorage.removeItem("token");
      this.$router.push("/");
      this.$message({
        type: "success",
        message: "退出登录成功!",
        center: true,
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../assets/styles/thmes.less");
.index-container {
  height: 100%;
  width: 100%;
  .index-container-left {
    height: 100%;
    padding: 10px 25px;
    width: 230px;
    background-color: @basecolor2;
    .left-header {
      margin-bottom: 35px;
      .iconBox {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background-color: #fff;
        text-align: center;
        line-height: 56px;
        .iconfont {
          font-size: 35px;
          font-weight: bold;
          color: #0d92f9;
        }
      }
    }
    .left-nav {
      .el-menu {
        border: 0;
        i {
          color: #fff;
        }
      }
    }
  }
  .index-container-right {
    width: 100%;
    flex: 1;
    background-color: #fafafa;
    .right-header {
      width: 100%;
      padding: 0 30px;
      height: 80px;
      background-color: @basecolor;
      .right-header-left {
        height: 80px;
        .el-breadcrumb /deep/ .el-breadcrumb__inner {
          color: #fff !important; //你想要设置的字体颜色
        }
        .el-breadcrumb /deep/.el-breadcrumb__separator {
          color: #fff !important;
        }
      }
      .right-header-right {
        .headPic {
          width: 68px;
          height: 68px;
          border-radius: 50%;
          overflow: hidden;
          img {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>